<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矢量图</title>
    <style>
        svg{
            width: 100px;
            height:50px;
            border:1px solid red;
        }
        
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text id="tx" x="-15" y="15" style="font-size:30px" >A</text>
     </svg> 
     <script>
         let circle = document.getElementById("circle");
         let rect = document.getElementById("rect");
         
         let tx = document.getElementById("tx");
         let rotate = 0;
        //  circle.onclick = function(){
        //     //  rect.style.transform = `translate(x, y)`;
        //     rect.style.transform = `translate(200px,75px) rotate(${rotate++}deg)`
             
        //      console.log("circle",rect.style.transform);
        //      this.style.r = 80;
        //      this.style.fill = "green";
        //  }
         setInterval(function(){
             console.log(rotate);
            // rect.style.transform = `translate(200px,75px) rotate(${rotate++}deg)`
            tx.style.transform = `translate(15px,25px) rotate(${rotate++}deg)`
         },50);

         
     </script>
</body>
</html>